<template>
  <div class="box">
    <h1>我是根组件</h1>
    <p>
      <!-- 使用过滤器 -->
      {{ time|timeFormater }}
    </p>
    <Son></Son>
  </div>
</template>
<script>
import moment from 'moment';
import Son from './components/Son.vue'
export default {
  name: "",
  data() {
    return {
      time: Date.now(),
    };
  },
  //局部的过滤器:配置项英文单词filters.过滤器的作用是利用一个数值,造出一个新的数值
  filters: {
    //定义过滤器
    //val:即为管道前面数值
    //函数名字符合命名标识符规范即为
    timeFormater(val) {
      //过滤器函数里面this->undefined
      //返回数值即为过滤器返回结果
      return moment(val).format('YYYY-MM-DD');
    },
  },
  components: {
     Son
  },
};
</script>

<style scoped lang="less">
/*目前脚手架支持的样式都是CSS样式:工作的时候经常写less、scss等等*/
/*
   如果你想在项目中:组件这里书写less样式,需要安装依赖 less依赖 
    第一步:安装less 与 less-loader 两个插件   cnpm install --save less less-loader 
    第二步:在style标签加上一个lang属性，属性值为less,代表样式区域书写的less样式
    定义less变量  @进行定义  使用的时候加上@
*/
@erha: red;
.box {
  h1 {
    color: @erha;
  }
}
</style>
